<template>
	<view class="cooperation" :style="{height:height+'px'}">
		<view style="padding:30upx;background: linear-gradient(#dcdcdc, #ffffff);">
			<view class="card-wrap">
					<image src="../../static/img/card.png"
						   style="width: 57%;height: calc(55vw + 1px);position: absolute;border-top-left-radius: 20upx;border-bottom-left-radius: 20upx"/>
					<image :src="data.trueAvatar"
						   style="margin-left:47%;width:53%;height: 55vw;" />

				<view style="position: absolute;left: 60upx;top:64upx">
					<image :src="team.cardLogo" class="logo"/>
					<view v-if="data.trueName">
						<view class="name">{{data.trueName}}</view>
						<view class="duty">{{data.jobPosition}}</view>
						<view style="margin-top: 10upx">
							<text class="iconfont" style="color:#0ABC64;font-size:20upx;">&#xe659;</text>
							<span style="margin-left:4upx;font-size: 20upx;color:#AAAAAA">微信</span>
							<view style="font-size: 30upx;color:#393939">{{data.wxAccount}}</view>
						</view>
						<view>
							<text class="iconfont" style="color:#0ABC64;font-size:20upx;">&#xe6dd;</text>
							<span style="margin-left:4upx;font-size: 20upx;color:#AAAAAA">微信二维码</span>
							<view style="font-size: 30upx;color:#393939">点击查看</view>
						</view>
					</view>
				</view>
			</view>
			<view class="button-wrap">
				<button type="primary" open-type="share" class="button" v-if="data.trueName">
					<text class="iconfont" style="margin-right:10upx;font-size:32upx;color: white;">
						&#xe921;</text>
					转发
				</button>
				<button type="primary" class="button" v-else @click="noShare">
					<text class="iconfont" style="margin-right:10upx;font-size:32upx;color: white;" >
						&#xe921;</text>
					转发
				</button>
				<button @click="goUrl" type="primary" class="button" style="background: #E0FBED;color: #0ABC64">
					<text class="iconfont" style="margin-right:10upx;font-size:32upx;color: #0ABC64;">
						&#xe61a;</text>
					编辑
				</button>
			</view>
<!--			<view style="display: flex;" v-if="data.trueName">-->
<!--				<view>-->
<!--					<image v-for="item in [1,1,1,1,1,1]" class="nav-head" src="http://n.sinaimg.cn/news/transform/700/w1000h500/20190722/e14c-iaantfi6168637.jpg"/>-->
<!--				</view>-->
<!--				<view class="browse">209人浏览</view>-->
<!--			</view>-->
		</view>
		<view class="bottom" v-if="data.trueName">
			<view style="display: flex">
				<view class="dot"/>
				<view style="font-size: 32upx;line-height: 40upx">个人简介</view>
			</view>
			<view style="margin: 20upx 0;display: flex">
				<image style="width: 64upx;height: 64upx;margin: 0" class="nav-head"
					   :src="data.trueAvatar"/>
				<view @click="audioPlay" class="nav-back" style="width: 100px;height:60upx;margin-top: 2upx">
					<view class="nav-head" style="margin:0 30upx;border-radius: 0">
						{{duration}}"
					</view>
					<view>
						<text class="iconfont" :style="{fontSize:'60rpx',color:flag?'#0ABC64':'#7f7f7f'}">
							&#xe601;</text>
					</view>
				</view>
			</view>
			<text class="brief">
				{{data.description}}
			</text>
		</view>
	</view>
</template>

<script>
	import API from '../../common/api.js';

	export default {
		components:{
		},
		data() {
			return {
				height: uni.getSystemInfoSync().windowHeight,
				team:uni.getStorageSync('team')?JSON.parse(uni.getStorageSync('team')):{name:'团队',id:0},
				backgroundAudioManager:null,
				flag:false,
				duration:0,
				data:{}
			}
		},
		onLoad(){
			this.getData()
		},
		onShow(){
			let t= uni.getStorageSync('preview');
			if(t){
				this.getData()
				uni.removeStorageSync('preview');
			}
		},
		methods:{
			getData(){
				API.userMy({
					token:uni.getStorageSync('token')}).then(res=>{
					console.log(res,110000)
					if(res.status==200){
						this.data=res.data.extra
						this.audio()
					}else{
						uni.showModal({
							title: '提示',
							content: '请求失败！',
							showCancel: false,
						});
					}
				})
			},
			noShare(){
				uni.showToast({
					title: '请先完善资料',
					icon: 'none' });
			},
			goUrl(){
				uni.navigateTo({
					url: '../index/editCard?trueName='+this.data.trueName+'&jobPosition='
							+this.data.jobPosition+'&wxAccount='+this.data.wxAccount
							+'&wxQrCodeUrl='+this.data.wxQrCodeUrl+'&description='+this.data.description
							+'&tempFilePath='+this.data.introAudioUrl+'&trueAvatar='+this.data.trueAvatar
				});
			},
			audio(){
				this.backgroundAudioManager = uni.getBackgroundAudioManager()
				this.backgroundAudioManager.title = '语音介绍'
				this.backgroundAudioManager.epname = '语音介绍'
				this.backgroundAudioManager.singer = '微信用户'
				 this.backgroundAudioManager.src = this.data.introAudioUrl
				// 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
				// this.backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
				this.backgroundAudioManager.onCanplay(res=>{
					this.backgroundAudioManager.pause()
					this.backgroundAudioManager.seek(0)
					setTimeout(() => {
						this.duration=parseInt(this.backgroundAudioManager.duration+1)
					}, 100)
				})
				this.backgroundAudioManager.onEnded(res=>{
					this.backgroundAudioManager.src = this.data.introAudioUrl
							// 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
					this.backgroundAudioManager.pause()
					this.flag=false
				})
			},
			audioPlay() {
				if(this.flag){
					this.backgroundAudioManager.pause()
					this.backgroundAudioManager.seek(0)
				}else{
					this.backgroundAudioManager.play()
				}
				this.flag=!this.flag
			},
		}
	}
</script>

<style>
	.cooperation{
		background: #F9F9F9;
	}
	.card-wrap{
		border-radius: 20upx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		box-shadow: 0px 6px 10px 6px rgba(232, 232, 232, 1);
		font-family: -apple-system;
		overflow: hidden;
		display: flex;
	}
	.logo{
		width: 170upx;
		height: 44upx;
	}
	.name{
		color: rgba(79, 79, 79, 1);
		font-size: 38upx;
		margin-top: 22upx;
		font-family: PingFangSC-regular;
	}
	.duty{
		color: rgba(100, 100, 100, 1);
		font-size: 24upx;
		font-family: PingFangSC-regular;
	}
	.button-wrap{
		display: flex;
		justify-content: space-between;
		margin: 40upx 0;
	}
	.button{
		width: 45%;
		height: 84upx;
		border-radius: 242upx;
		background-color: rgba(10, 188, 100, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 32upx;
		font-family: -apple-system;
		border: 1px solid rgba(10, 188, 100, 1);
	}
	.browse{
		color: rgba(183, 183, 183, 1);
		font-size: 22upx;
		display: inline-block;
		line-height: 60upx;
	}
	.bottom{
		margin-top: 40upx;
		background: white;
		padding: 40upx 30upx;
	}
	.dot{
		width: 12upx;
		height: 12upx;
		border-radius: 12upx;
		background: #0ABC64;
		margin-right: 20upx;
		margin-top: 16upx;
	}
	.brief{
		color: rgba(68, 68, 68, 1);
		font-size: 28upx;
	}
</style>
